<template>
	<view class="container assistant-tipslist-container">

		<view class="page-main">
			<view class="page-list" v-for="item in pageList" :key="item.id">
				<view class="list-top">上传时间：{{$format(item.uploadTime)}}</view>
				<view class="list-main">
					<view class="list-input">
						<text class="form-title">备注：</text>
						<span class="list-info">{{item.remark}}</span>
					</view>
					<view class="img-box">
						<image class="list-img" :src="item.picture" mode="aspectFill"
							@error="$handleImageError(item,'picture')" @click="$lookImage(0,[item.picture])"></image>
					</view>
				</view>

				<view class="list-bottom">
					<view class="yuan-btn btn-primary" @click="clickReset(item)">重新上传</view>
				</view>

			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
		<view class="page-bottom">
			<view class="yuan-btn btn-primary" @click="clickUp">上传病例</view>
		</view>

		<view class="updata-panel" :class="showUpdata&&'update-panel-show'">
			<view class="updata-main">
				<view class="updata-title">上传病例</view>
				<view class="list-input">
					<text class="form-title">备注：</text>
					<input class="form-input" v-model="formData.remark" type="text">
				</view>
				<view class="updata-img-box">
					<template v-if="selImg||formData.picture">
						<view class="null-img-box" @click="editPhoto">
							<image class="updata-img" :src="selImg" mode="aspectFill" v-if="selImg"></image>
							<image class="updata-img" :src="formData.picture" mode="aspectFill" v-else></image>

						</view>
						<view>点击图片重新选择</view>
					</template>
					<template v-else>
						<view class="null-img-box" @click="editPhoto">
							<view class="iconfont">&#xe645;</view>

						</view>
						<view>请选择上传您的病例图片</view>
					</template>

				</view>
				<view class="btn-box">
					<view class="yuan-btn btn-primary" @click="clickSave">保存病例</view>
					<view class="yuan-btn btn-default" @click="clickCancel">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { chooseImage, hideLoading, showLoading, showToast, uploadFile } from '../../common/util';
	import userApi from '../../common/userApi';
	const formData = ref<any>({
		remark: '',
		picture: ''
	})
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageList = ref([])
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	onMounted(() => {
		getPageList()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = { pageNum, pageSize }
			const res = await userApi.findElectronRecordList(params)
			const data = res.data || {}
			if (data.records.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(data.records)

		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const showUpdata = ref(false)
	const clickUp = () => {
		formData.value = {
			picture: '',
			remark: ''
		}
		showUpdata.value = true
	}
	const clickSave = async () => {
		showLoading()
		// 上传图片
		let picture = ''
		if (selImg.value) {
			const fileRes : any = await uploadFile(selImg.value)
			const data : any = JSON.parse(fileRes.data)
			picture = data.msg
			
		} else {
			picture = formData.value.picture
		}
		try {
			if (formData.value.id) {

				await userApi.updateElectronRecord({ ...formData.value, picture })
			} else {
				await userApi.addElectronRecord({ ...formData.value, picture })
			}
			selImg.value = ''
			showToast('添加成功', {}, () => {
				showUpdata.value = false
				refreshList()
			})

		} finally {
			hideLoading()
		}


	}
	const clickCancel = () => {
		showUpdata.value = false
	}
	const clickReset = (item) => {
		formData.value = { ...item }
		showUpdata.value = true
	}

	const selImg = ref('')
	const editPhoto = () => {
		chooseImage((res) => {
			selImg.value = res.tempFilePaths[0] + ''
		})

	}
</script>

<style lang="scss">
	.assistant-tipslist-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 190rpx;

		.page-main {
			margin-top: 10rpx;
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(100, 100, 100, 0.1);
			padding: 20rpx;
		}

		.list-top {
			font-size: 30rpx;
			color: #202020;
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: solid 1px rgba(232, 232, 232, 1);
		}

		.list-main {
			padding-top: 10rpx;
			padding-bottom: 20rpx;
		}

		.list-input {
			display: flex;
			margin-bottom: 10rpx;
			align-items: center;
		}

		.list-info {
			display: inline-block;
			padding: 10rpx 0;
			font-size: 26rpx;
		}

		.form-title {
			font-size: 28rpx;
			color: #6D6D6D;
			flex-shrink: 0;
		}

		.form-input {
			background: #F4F4F4;
			flex-grow: 1;
			height: 68rpx;
			border-radius: 6rpx;
			padding: 0 10rpx;
		}

		.img-box {
			background-color: rgba(242, 243, 248, 1);
			border-radius: 10rpx;
			padding: 10rpx;
		}

		.list-img {
			display: block;
			width: 100%;
			height: 400rpx;
			border-radius: 10rpx;
		}



		.list-bottom {
			border-top: solid 1px rgba(232, 232, 232, 1);
			padding-top: 20rpx;
			text-align: right;

			.yuan-btn {
				display: inline-flex;
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
			}
		}

		.page-bottom {
			position: fixed;
			width: 100%;
			height: 170rpx;
			padding: 20rpx;
			padding-bottom: 50rpx;
			background-color: #fff;
			box-shadow: 0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			bottom: 0;
			left: 0;
			z-index: 10;

			.yuan-btn {
				height: 80rpx;
				border-radius: 80rpx;
				width: 100%;
			}
		}

		.updata-panel {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 11;
			background-color: rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			transform: translateX(-100%);

			.updata-title {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				padding-bottom: 30rpx;
			}

			.updata-main {
				background-color: #fff;
				border-radius: 10rpx;
				width: 90%;
				margin: 0 auto;
				padding: 30rpx;
				transform: scale3d(0, 0, 0);
				transition: all 0.3s;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 50rpx 0;
			}

			.yuan-btn {
				width: 200rpx;
				height: 80rpx;
			}

			.updata-img-box {
				background-color: #6D6D6D;
				color: #fff;
				border-radius: 10rpx;
				text-align: center;
				font-size: 28rpx;
				padding: 20rpx;

				.iconfont {
					font-size: 80rpx;
					margin-bottom: 10rpx;
				}

				.updata-img {
					display: block;
					height: 100%;
					width: 100%;
					border-radius: 10rpx;
				}

				.null-img-box {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					height: 300rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.update-panel-show {
			transform: translateX(0);

			.updata-main {
				transform: scale3d(1, 1, 1)
			}
		}
	}
</style>